<template>
  <div>
    <div class="header">
      <div class="user">
        <el-avatar :size="74" :src="userMsg.avatar">
          <img :src="noLoginUserAvatar" />
        </el-avatar>
        <el-link type="info" :underline="false" style="ffont-weight:700;font-size:16px;line-height:60px;vertical-align:top; color: #6d757a;padding-left:20px;">{{`${userMsg.nickname}< ${userMsg.email} >`}}</el-link>
      </div>
      <div class="tabs">
        <el-tabs :value="activeName" @tab-click="handleClick" style="height:65px;line-height:65px;">
          <el-tab-pane name="/">
            <span slot="label" class="tab-span"><i class="fa fa-cog tab-icon"></i> 个人信息</span>
          </el-tab-pane>
          <el-tab-pane name="expertOriginMateManage">
            <span slot="label" class="tab-span"><i class="fa fa-archive tab-icon"></i> 原素材管理</span>
          </el-tab-pane>
          <el-tab-pane name="expertPublished">
            <span slot="label" class="tab-span"><i class="fa fa-gitlab tab-icon"></i> 已发布</span>
          </el-tab-pane>
          <el-tab-pane name="expertPrivateMessage">
            <span slot="label" class="tab-span"><i class="fa fa-comments tab-icon"></i> 私信</span>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
import noLoginUserAvatar from "@/assets/user/noLoginUserAvatar.png"
export default {
  data() {
    return {
      noLoginUserAvatar: noLoginUserAvatar,
      imgs: {
        type: 'all',
        imgs: [],
        pageLimit: 20,
        colLimit: 4,
        loading: false
      },
      count: 0
    }
  },
  computed: {
    ...mapGetters({
      userMsg: 'user/getUserMsg',
      userType: 'user/getUserType',
      userLegal: 'user/getUserIsLegal'
    }),
    activeName: function () {
      if (this.$route.name) {
        return this.$route.name;
      }
      else {
        return "/";
      }
    }
  },
  methods: {
    handleClick(tab, event) {
      window.console.log(tab.name,"  ",this.$route.name)
      if (this.$route.name == undefined) {
        if (tab.name != "/") {
          this.$router.push({
            name: tab.name
          })
        }
      }
      if (this.$route.name && tab.name != this.$route.name) {
        if (tab.name == "/") {
          this.$router.push({
            path: "/uIndex/expertCenter/"
          })
        }
        else {
          this.$router.push({
            name: tab.name
          })
        }

      }
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-tabs__nav-wrap::after {
  background: #fff;
}
.header {
  height: 150px;
  margin-bottom: 20px;
}
.user {
  padding: 5px 20px;
  margin: 0 0px;
  height: 74px;
  overflow: hidden;
  background-image: linear-gradient(rgb(244, 245, 247), rgb(195, 195, 197));
}
.tabs {
  height: 66px;
  background: #fff;
  padding: 0 20px;
  border-radius: 0 0 8px 8px;
  border: 1px solid #eee;
  border-top: none;
}
.user-nickname {
  vertical-align: top;
  line-height: 40px;
  color: white;
}
.tab-span {
  font-size: 15px;
}
.tab-icon {
  font-size: 19px;
}
.container {
  border-radius: 8px;
  padding: 15px 20px;
  border: 1px solid #eee;
  background: white;
}
</style>